#mendeleev table {
	border-collapse: collapse;
	margin-bottom: 1em;
}

#mendeleev td {
	width: 6em;
	padding: 2pt;
	border: solid 1px #888;
	cursor: default;
}

#mendeleev td.alkali, #mendeleev td.metalloid, #mendeleev td.transition, #mendeleev td.noid {
	cursor: pointer;
}

#tooltip {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	display: block;
	position: absolute;
	z-index: 99;
	list-style-type: none;
	border: solid 1px black;
	background-color: white;
	padding:0;
	margin: 0;
	cursor: pointer;
}
#tooltip li a {
	color: black;
	text-decoration: none;
	padding: 0 5pt;
	display: block;
}
#tooltip li a:hover {
	background-color: blue;
	color: white;
}

.alkali a, .metalloid a, .transition a, .noid a {
	text-decoration: none;
}
.alkali a:hover, .metalloid a:hover, .transition a:hover, .noid a:hover {
	text-decoration: underline overline;
}

.alkali {
	background-color:#FF7578;
}
.metalloid {
	background-color:#FFCC66;
}
.transition {
	background-color:#66CCFF;
}
.noid {
	background-color:#66FF99;
}
span.code, span.atomic, span.molar {
	font-family: Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
}
.code {
	font-size: 18px;
	font-weight:bold;
	float: left;
}
.atomic {
	font-size: 12px;
	font-weight:bold;
	float: right;
}
.molar {
	font-size: 9px;
	vertical-align: middle;
	display: block;
	clear: both;
}
.name {
	font-size:10px;
	text-transform: uppercase;
	display: block;
	text-align: right;
}
.transition .atomic {
	float: left;
}
.transition .code {
	float: right;
}
.transition .molar {
	text-align: right;
}
div#mendeleev td.highlight {
	border: solid 3px #f29f05;
	color: #d90404;
	background-color: #ffd83d;
}
.extra {
	display: none;
}
div#extra-field {
	font-size: smaller;
	padding: 1em;
	position: absolute;
	left: 0;
	top: 0;
	border: solid 1px #575757;
	background-color: #d4d4d4;
}
div#mendeleev td.wrong-guess {
	background-color: red;
	color: white;
}
div#mendeleev div.statistics {
	border: solid 1px gray;
	padding: .5em;
	margin: 1em;
	clear: both;
}
div#mendeleev a img {
	border: none;
}
div#mendeleev div.statistics div.good,
div#mendeleev div.statistics div.wrong {
	height: 1em;
	width: 1px;	
	margin-bottom: .5em;
}
div#mendeleev div.statistics div.good {
	border: solid 1px #1da612;
	background-color: #bbf8b7;
}
div#mendeleev div.statistics div.wrong {
	border: solid 1px #e71212;
	background-color: #fbb0b0;
}
div#mendeleev td.shadow {
	border: solid 1px #a4a4a4;
	background-color: #fff;
	color: #e5e5e5;
}
div#mendeleev div.timer {
	height: 2em;
}
